import React from 'react'

function BoilingVerdict (props) {
  return props.celsius >= 100 ? (
    <p>The water would boil.</p>
  ) : (
    <p>The water would not boil.</p>
  )
}
class Calculator extends React.Component {
  constructor (props) {
    super(props)
    this.state={
        temperature: ''
    }
  }
  handleInput=(e)=>{
      const { name, value} = e.target
      this.setState({
        [name] : value
      })
  }
  render () {
      const { temperature } = this.state
    return (<fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input value={temperature} onChange={this.handleInput} name='temperature'></input>
        <BoilingVerdict celsius={parseFloat(temperature)}></BoilingVerdict>
    </fieldset>)
  }
}
export { Calculator }
